<template>
  <page-header-wrapper>
    <a-spin :spinning="loading" tip="加载中...">
      <a-row :gutter="15">
        <a-col :span="8">
          <a-card class="card-margin" title="命令统计" :bordered="false">
            <div id="redisCommandEcharts" :style="defaultStyle"></div>
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card class="card-margin" title="内存统计" :bordered="false">
            <div id="redisMemoryEcharts" :style="defaultStyle"></div>
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card class="card-margin" title="内存分配" :bordered="false">
            <div id="redisShareEcharts" :style="defaultStyle"></div>
          </a-card>
        </a-col>
        <a-col :span="24">
          <a-card class="card-margin" title="Redis其他信息" :bordered="false">
            <a-descriptions size="small" bordered>
              <a-descriptions-item v-for="(item, index) in memoryList" :key="index" :label="item.name">{{ item.value }}</a-descriptions-item>
            </a-descriptions>
          </a-card>
        </a-col>
      </a-row>
    </a-spin>
  </page-header-wrapper>
</template>

<script>
import {getInfoRedis} from '@/api/monitor/redisMonitor'
import * as echarts from 'echarts'

export default {
  data() {
    return {
      loading: true,
      defaultStyle: {float: 'left', width: '100%', height: '300px'},
      // 命令统计
      redisCommandEcharts: {},
      redisCommandOption: {
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            data: []
          }
        ]
      },
      // 内存统计
      redisMemoryEcharts: {},
      redisMemoryOption: {
        series: [
          {
            type: 'gauge',
            progress: {
              show: true,
              width: 5
            },
            max: 100,
            detail: {
              fontSize: 20,
              offsetCenter: [0, '70%'],
              formatter: function(value) {
                return value + 'M'
              }
            },
            data: [
              {
                value: 0
              }
            ]
          }
        ]
      },
      // 内存分配
      redisShareEcharts: {},
      redisShareOption: {
        xAxis: {
          type: 'category',
          data: ['操作系统 -> Redis', 'Redis分配器 -> Redis']
        },
        yAxis: {
          type: 'value'
        },
        barWidth: 30,
        label: {
          show: true,
          position: 'top',
          color: '#333',
          fontSize: '12px',
          formatter: (params) => {
            return params.value + 'K'
          }
        },
        series: [
          {
            data: [120, 200],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      },
      // 内存信息
      memoryList: []
    }
  },
  mounted() {
    getInfoRedis().then(res => {
      const {commandList, info} = res.data
      for (const key in info) {
        this.memoryList.push({name: key, value: info[key]})
      }
      // 命令统计
      this.redisCommandOption.series[0].data = commandList
      this.redisCommandEcharts = echarts.init(document.getElementById('redisCommandEcharts'))
      this.redisCommandEcharts.setOption(this.redisCommandOption)
      // 内存统计
      console.log(info.used_memory_human)
      this.redisMemoryOption.series[0].data[0].value = (info.used_memory_human.replace('K', '') / 1000).toFixed(2)
      this.redisMemoryEcharts = echarts.init(document.getElementById('redisMemoryEcharts'))
      this.redisMemoryEcharts.setOption(this.redisMemoryOption)
      // 内存分配
      this.redisShareOption.series[0].data = [info.used_memory_rss_human.replace('K', ''), info.used_memory_human.replace('K', '')]
      this.redisShareEcharts = echarts.init(document.getElementById('redisShareEcharts'))
      this.redisShareEcharts.setOption(this.redisShareOption)
      // 图表自适应
      window.addEventListener('resize', () => {
        this.redisCommandEcharts.resize()
        this.redisMemoryEcharts.resize()
      })
      this.$message.success(res.msg)
      this.loading = false
    })
  }
}
</script>
<style scoped>
.card-margin {
  margin-bottom: 15px;
}
</style>
